<script setup>
import { ref } from 'vue'
import axios from 'axios'

const testResult = ref('')
const isTesting = ref(false)

const testDatabase = async () => {
  isTesting.value = true
  testResult.value = '测试中...'
  try {
    const response = await axios.get('/api/test-database')
    if (response.data.success) {
      testResult.value = '数据库读写测试成功！'
    } else {
      testResult.value = '数据库读写测试失败：' + response.data.message
    }
  } catch (error) {
    testResult.value = '数据库读写测试失败：' + error.message
  } finally {
    isTesting.value = false
  }
}
</script>

<template>
  <div class="database-test-page">
    <h2>数据库通信测试</h2>
    <el-button :loading="isTesting" @click="testDatabase">开始测试</el-button>
    <p v-if="testResult">{{ testResult }}</p>
  </div>
</template>

<style scoped>
.database-test-page {
  padding: 20px;
}
</style>